<template>
    <div class="myhead">
        <h2>My ToDo List</h2>
        <div class="box">
          <myHeader :add="addTodo"/>
        </div>
    </div>
    <listContent :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
    <myFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo" :clearCompletedTodo="clearCompletedTodo"/>
</template>


<script setup>
import toDOHeader from './components/toDOHeader.vue';
import toDoList from './components/toDoList.vue';
import myHeader from './components/listHeader.vue';
import listContent from './components/listContent.vue';
import myFooter from './components/listFooter.vue';
import { ref, onMounted } from 'vue';

// 初始化 todos，尝试从 localStorage 中加载数据
const todos = ref(JSON.parse(localStorage.getItem('todos')) || []);

// 监听 todos 的变化，并在变化时保存到 localStorage
const todoChangeListener = () => {
  localStorage.setItem('todos', JSON.stringify(todos.value))
}

// 添加待办事项
const addTodo = (todo) => {
  todos.value.unshift(todo)
  todoChangeListener()
}

// 切换待办事项的完成状态
const checkTodo = (id) => {
  todos.value.forEach((todo) => {
    if (todo.id === id) todo.check = !todo.check
  })
  todoChangeListener()
}

// 删除待办事项
const deleteTodo = (id) => {
  todos.value = todos.value.filter((todo) => todo.id !== id)
  todoChangeListener()
}

// 全选/全不选待办事项
const checkAllTodo = (check) => {
  todos.value.forEach((todo) => {
    todo.check = check
  })
  todoChangeListener()
}

// 清空所有待办事项
const clearAllTodo = () => {
  todos.value = []
  todoChangeListener()
}

// 清空已完成的待办事项
const clearCompletedTodo = () => {
  todos.value = todos.value.filter((todo) => !todo.check)
  todoChangeListener()
}

// 当组件挂载时，如果 localStorage 中有数据，则更新 todos
onMounted(() => {
  if (localStorage.getItem('todos')) {
    todos.value = JSON.parse(localStorage.getItem('todos'))
  }
})
</script>




<style scoped>

</style>
